<script setup lang="ts">
import {computed, onBeforeMount, onMounted, reactive, ref} from 'vue';
import MyButton from "@/components/common/myButton.vue";
import type {enterpriseInfoType} from "@/utils/type";
import {
  deleteEnterpriseApi,
  getEnterpriseInfoApi,
  getIfInEnterprise, params4transferEnterpriseApi,
  quitEnterpriseApi, transferEnterpriseApi
} from "@/api/path/enterpriseApis";
import {ElMessage, ElMessageBox} from "element-plus";
import {useRoute, useRouter} from "vue-router";
import {getObj} from "@/utils/obs";
import {useAccountStore} from "@/stores/account";
import {useVerify} from "@/stores/verify";
import {passVerification} from "@/api/path/message";
import {Minus, Plus} from "@element-plus/icons-vue";
// import {getObj} from "@/utils/obs";

const enterpriseId = ref();
const accountStore = useAccountStore();
const route = useRoute();
const router = useRouter();
const isInEnterprise = ref();
const emits = defineEmits(['sendName']);
// const isInEnterprise = () => {
//   getIfInEnterprise(enterpriseId.value).then((res: any) => {
//     if (res.success) {
//       return res.isAccepted;
//     }
//     else {
//       ElMessage.error(res.msg);
//       return false;
//     }
//   })
//   // return accountStore.enterprise.enterpriseId == route.query.enterpriseId;
// }

const v = useVerify();
// mock data
const enterpriseInfoData = ref<enterpriseInfoType>({
  enterpriseName: '',
  enterpriseIntro: '',
  // enterpriseImgSrc: 'https://img95.699pic.com/photo/50136/9491.jpg_wh300.jpg',
  enterpriseClass: '',
  followerNum: 0,
  enterpriseContactWay: '',
})
// 单独管理
const imgSrc = ref('');
const isAdmin = ref(false);
const isDialogVisible = ref(false);
const transferFormData = reactive({
  tUId: ''
})
const getEnterpriseInfo = () => {
  getEnterpriseInfoApi(enterpriseId.value).then((res: any) => {
    if (res.success) {
      enterpriseInfoData.value.enterpriseName = res.name;
      emits('sendName', res.name)
      enterpriseInfoData.value.enterpriseIntro = res.intro;
      enterpriseInfoData.value.enterpriseContactWay = res.contactWay;
      getObj(res.imageKey, imgSrc);
      // getObj(res.enterpriseImgKey, imgSrc);
      enterpriseInfoData.value.enterpriseClass = res.class;
      enterpriseInfoData.value.followerNum = res.followCount;
    }
    else {
      ElMessage.error(res.msg);
    }
  })
}
const followEnterprise = () => {
  ElMessage.success('关注企业')
}
const enterEnterprise = () => {
  passVerification(v.getVid()).then((res: any) => {
    if (res.success) {
      ElMessage.success('认证成功');
    }
    else {
      ElMessage.error(res.msg);
    }
  })
}
const quitEnterpriseOnClick = () => {
  ElMessageBox.confirm(
      '确定退出企业',
      'Warning',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
      }
  )
  .then(() => {
    // quitEnterprise();
    quitEnterpriseApi(enterpriseId.value).then((res: any) => {
      if (res.success) {
        ElMessage.success('已成功退出企业')
      }
    })
  })
  .catch(() => {})
}
const deleteEnterprise = () => {
  ElMessageBox.confirm(
      '确定注销企业',
      'Warning',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
      }
  )
    .then(() => {
      // quitEnterprise();
      deleteEnterpriseApi(enterpriseId.value).then((res: any) => {
        if (res.success) {
          ElMessage.success('已成功注销企业')
          router.push('/');
        }
      })
    })
    .catch(() => {})
}
const handleTransfer = () => {
  isDialogVisible.value = true;
}
const handleCloseTransfer = () => {
  isDialogVisible.value = false;
}
const handleSubmitTransfer = () => {
  // TODO
  const param: params4transferEnterpriseApi = {
    enterpriseId: enterpriseId.value,
    targetUserId: transferFormData.tUId,
  }
  transferEnterpriseApi(param).then((res: any) => {
    if (res.success) {
      ElMessage.success('转让成功');
      initData();
    }
    else {
      ElMessage.error(res.msg);
    }
  })
  handleCloseTransfer();
}
const handleEditInfo = () => {
  router.push({
    path: '/editEnterprise',
    query: {
      enterpriseId: enterpriseId.value,
    }
  })
}
const initData = () => {
  enterpriseId.value = route.query.enterpriseId;
  isAdmin.value = accountStore.enterprise.is_admin && enterpriseId.value == accountStore.enterprise.enterpriseId;
  if (enterpriseId.value) {
    getEnterpriseInfo();
    getIfInEnterprise(enterpriseId.value).then((res: any) => {
      if (res.success) {
        isInEnterprise.value = res.isAccepted;
      }
      else {
        // ElMessage.error(res.msg);
        isInEnterprise.value = false;
      }
    })
  }
  else {
    ElMessage.error('企业id为空');
  }
}
onMounted(() => {
  initData();
})
</script>

<template>
  <span class="content-wrapper">
    <my-button v-show="isAdmin" class="editBtn" type="secondary" @click="handleEditInfo">编辑企业信息</my-button>
    <span class="back"></span>
    <img class="enterpriseImg" :src="imgSrc"/>
    <span class="info-wrapper">
      <span class="title">
        {{enterpriseInfoData.enterpriseName}}
      </span>
      <span class="enter-intro">
        {{enterpriseInfoData.enterpriseIntro}}
      </span>
      <span class="detail-group">
<!--        <span v-for="item in enterpriseInfoData.enterpriseClass" :key="item" class="detail-info">-->
<!--          {{item}}-->
<!--        </span>-->
        <span class="detail-info">
          {{enterpriseInfoData.enterpriseClass}}
        </span>
        <span class="detail-info">
          {{enterpriseInfoData.followerNum}}
          位关注者
        </span>
        <span class="detail-info last">
          联系我们<span style="margin-left: 2px; margin-right: 2px">:</span>
          {{enterpriseInfoData.enterpriseContactWay}}
        </span>
      </span>
      <span class="btn-group">
        <my-button @click="followEnterprise" :height="35" :width="200">
          <el-icon style="margin-right: 5px"><Plus /></el-icon>
          关注
        </my-button>
        <template v-if="isInEnterprise && !isAdmin">
<!--          企业内 非管理员-->
          <my-button @click="quitEnterpriseOnClick" style="margin-left: 20px" :height="35" :width="200" type="light">
            <el-icon style="margin-right: 5px"><Minus /></el-icon>
            退出企业
          </my-button>
        </template>
        <template v-else-if="isAdmin">
<!--          企业内 管理员-->
          <my-button @click="deleteEnterprise" style="margin-left: 20px" :height="35" :width="200" type="light">
            <el-icon style="margin-right: 5px"><DeleteFilled /></el-icon>
            注销企业
          </my-button>
          <my-button @click="handleTransfer" style="margin-left: 20px" :height="35" :width="200" type="light">
            <el-icon style="margin-right: 5px"><HelpFilled /></el-icon>
            转让企业
          </my-button>
        </template>
        <template v-else>
<!--          无企业-->
          <my-button @click="enterEnterprise" style="margin-left: 20px" :height="35" :width="200" type="light">
            <el-icon style="margin-right: 5px"><Link /></el-icon>
            企业认证
          </my-button>
        </template>
      </span>
    </span>
  </span>
  <el-dialog v-model="isDialogVisible" title="转让企业" width="500">
    <el-form :model="transferFormData">
      <el-form-item label="目标用户id">
        <el-input v-model="transferFormData.tUId" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="d-btn-group">
        <my-button type="light" @click="handleCloseTransfer">取消</my-button>
        <my-button type="primary" @click="handleSubmitTransfer">
          确认
        </my-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.content-wrapper {
  display: flex;
  flex-direction: column;
  height: 350px;
  /*height: 30%;*/
  padding: 0 0 20px 0;
  border-radius: 15px;
  background-color: white;
  border: 2px solid var(--color-plain);
  position: relative;
  .back {
    display: flex;
    border-radius: 14px 14px 0 0; /*感觉直接给15的圆角溢出来一点*/
    background-color: var(--color-primary);
    width: 100%;
    height: 10vh;
    /*height: 100px;*/
    /*background-image: url("https://ts1.cn.mm.bing.net/th/id/R-C.823270fc68b9c58f0d9b3feb92b7b172?rik=aubbEBMSC86e%2bw&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50038%2f1181.jpg_wh860.jpg&ehk=iQboj4JMLLfDitOL7VJtSktED0AE%2f7Fyxfik0GTJkyQ%3d&risl=&pid=ImgRaw&r=0");*/
  }
  .enterpriseImg {
    position: absolute;
    top: 30%;
    transform: translate(30px, -50%);
    height: 100px;
    width: 100px;
  }
  .editBtn {
    position: absolute;
    top: calc(30% + 20px);
    right: 30px;
    /*transform: translate(-30px, -50%);*/
    height: 100px;
    width: 100px;
  }
  .info-wrapper {
    margin-top: 50px; /*把企业头像避开*/
    margin-left: 30px;
    display: flex;
    flex-direction: column;
    .title {
      font-size: 36px;
      font-weight: 700;
    }
    .enter-intro {
      font-size: var(--font-size-base);
    }
    .detail-group {
      .detail-info {
        color: grey;
        font-size: var(--font-size-small);
        &:not(.last)::after {
          content: '·';
          position: relative;
          padding: 0 5px
        }
      }
    }
    .btn-group {
      margin-top: 10px;
      display: flex;
      flex-direction: row;
    }
  }
}
.d-btn-group {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-direction: row;
}
</style>